<template>
    <div class="form-box">
        <h3>找回密码</h3>
        <el-form ref="form" v-bind:model="form"  label-width="80px">
            <el-form-item label="邮箱" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
                <el-row type="flex">
                    <el-input v-model="form.yanzheng" style="margin-right: 10px"></el-input>
                    <el-button round @click="send">发送验证码</el-button>
                </el-row>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item class="flex-btn">
                <el-button type="primary" @click="onSubmit('form')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>



<script>
export default {
    name: "password",
    created() {
    },
    data() {
        return {
            upLoadClicktag : 0,
            form: {
                username: '',
                yanzheng: '',
                password: '',
                realName: '',
                telephoneNumber:'',
                identityNumber:'',
                area:'',
                date:'2021-09-05'
            },
        }
    },
    methods:{
        onSubmit(formName) {
            var vm = this;
            this.axios({
                url: '/myapi/user/changePassword',
                method: 'post',
                //使用data是body传参，使用params是query传参
                data: {
                    code: vm.form.yanzheng,
                    email: vm.form.username,
                    password: vm.form.password
                }
            }).then(function (response) {
                if(response.data.success === true){
                    vm.$message({
                        message: '修改成功!',
                        type: 'success'
                    });
                }
                else {
                    vm.$message.error('修改失败!');
                }
            });
        },
        send(){
            var vm = this;
            //第一次进来为true
            if(vm.upLoadClicktag===0){
                //改版变量
                vm.upLoadClicktag = 1;
                //此处写你要做的事情，操作DOM，发送ajax请求等等。
                if(vm.form.username === ''){
                    vm.$message.error('请正确填写邮箱');
                }else {
                    this.axios({
                        url: '/myapi/user/sendCode/'+vm.form.username,
                        method: 'post'
                    }).then(function (response) {
                        if(response.data.success===true){
                            vm.$message({
                                message: '邮箱验证码已发送，注意查收!',
                                type: 'success'
                            });
                        }
                        else {
                            vm.$message.error('请正确填写邮箱或验证码!');
                        }

                    });
                }
                //30秒过后可以再次点击
                setTimeout(function () { vm.upLoadClicktag = 0 }, 30000);
            }else{
                alert('请勿频繁操作！');
            }


        }
    }
}
</script>

<style scoped>
.form-box{
    width: 500px;
    height: 750px;
    margin: 50px auto;
    padding: 10px 50px 20px 20px;

}

.flex-btn{
    float: left;
}
</style>
